.pe-checkbox {
    --pe-checkbox-size: var(--pe-default-height);
    --pe-checkbox-padding: var(--pe-padding-default);
    --pe-checkbox-font-size: var(--pe-font-size-default);
    --pe-checkbox-border-color: var(--pe-color-border);
    --pe-checkbox-hover-border-color: var(--pe-color-primary);
}

.pe-checkbox {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    height: var(--pe-checkbox-size);
    overflow: hidden;
    cursor: pointer;
    color: var(--pe-color-text);

    .pe-checkbox-item {
        height: var(--pe-checkbox-font-size);
        border-radius: 3px;
        border: 1px solid var(--pe-checkbox-border-color);
        transition: var(--pe-all-transition);
        background-color: var(--pe-color-white);
        aspect-ratio: 1;

        &:hover {
            border-color: var(--pe-checkbox-hover-border-color);
        }

        .pe-checkbox-square {
            width: 100%;
            height: 100%;
            color: #ffffff;
            transition: var(--pe-all-transition);
            display: flex;
            justify-content: center;
            align-items: center;
            transform: scale(0);
        }

        &+.pe-checkbox-content {
            margin-left: 5px;
        }
    }

    .pe-checkbox-content {
        font-size: var(--pe-checkbox-font-size);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}

.pe-checkbox-active {
    color: var(--pe-checkbox-hover-border-color);
}

.pe-checkbox-active.pe-checkbox-indeterminate {
    color: var(--pe-color-text);
}

.pe-checkbox-active,
.pe-checkbox-indeterminate {
    .pe-checkbox-item {
        background-color: var(--pe-checkbox-hover-border-color);
        border-color: var(--pe-checkbox-hover-border-color);

        .pe-checkbox-square {
            transform: scale(1);
        }
    }
}

.pe-checkbox-disabled {
    --pe-checkbox-hover-border-color: var(--pe-checkbox-border-color);
    color: var(--pe-checkbox-border-color);
    cursor: not-allowed;
}

.pe-checkbox-large {
    --pe-checkbox-size: var(--pe-large-height);
    --pe-checkbox-padding: var(--pe-padding-large);
    --pe-checkbox-font-size: var(--pe-font-size-large);
}

.pe-checkbox-small {
    --pe-checkbox-size: var(--pe-small-height);
    --pe-checkbox-padding: var(--pe-padding-small);
    --pe-checkbox-font-size: var(--pe-font-size-small);
}

.pe-checkbox+.pe-checkbox {
    margin-left: var(--pe-margin-left);
}

.pe-checkbox-border {
    border: 1px solid var(--pe-checkbox-border-color);
    border-radius: var(--pe-border-radius);
    padding: var(--pe-checkbox-padding);
    height: var(--pe-checkbox-size);
    transition: var(--pe-all-transition);

    &.pe-checkbox-active {
        border-color: var(--pe-checkbox-hover-border-color);
    }

    &:hover {
        border-color: var(--pe-checkbox-hover-border-color);
    }
}